<template>
  <div class="header">
    <el-row>
      <el-col :span="10">
        <span><i class="fa fa-home fa-1x header-icon"></i><span v-if="!isCollapse">{{title}}</span></span>
        <el-button type="text" class="fa header-icon" :class="{ 'fa-indent': isCollapse, 'fa-outdent': !isCollapse }" @click="collapse"></el-button>
      </el-col>
      <el-col :span="4" class="userinfo">
        <span class="userinfo-inner"><i class="fa fa-user fa-1x" /> {{user}}</span>
        <el-button @click="onOut" type="text">退出系统</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../api';

export default {
  name: 'manage-head',
  props: {
    title: String,
    user: String
  },
  data() {
    return {
      isCollapse: false
    };
  },
  created() {
    // this.staffInfo.staffName = this.
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
      this.$emit('collapse', this.isCollapse);
    },
    onOut() {
      api.doLogOut().then(() => {
        if (process.env.NODE_ENV === 'production') {
          window.location.href = '/login/index';
        } else {
          window.location.href = '/login';
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
  .header {
    background-color: #1F2D3D;
    color: #1F60A8;
    height: 60px;
    font-size: 25px;
    line-height: 60px;
    &-icon {
      color: #fff;
      margin-left: 15px;
      padding-right: 10px;
      &:hover {
        cursor: pointer;
        color: #3a8ee6;
      }
    }
    &-user {
      font-size: 15px;
    }
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color:#fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
  }
</style>
